<template>
  <view class="flex-col page">
    <view class="flex-col">
      <MyHeader title="收藏"></MyHeader>
      <view class="tab-bottom">
        <u-tabs :itemStyle="{flex:1,height:'88rpx'}" :list="navs" @click="navHandle"></u-tabs>
      </view>
      <view class="flex-col list">
        <view class="flex-col mt-10 list-item" v-for="(item, index) in items" :key="index">
          <view class="flex-col">
            <view class="flex-row justify-between">
              <view class="flex-row items-center">
                <image
                  class="shrink-0 image_7"
                  src="https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=4a528fe240a140f77b106e1d70d673ae.png"
                />
                <view class="flex-col shrink-0 group_4 ml-11">
                  <text class="self-start font_2">杨阳洋</text>
                  <text class="self-stretch font_4 text_8 mt-7">2024-12-12 20:30</text>
                </view>
              </view>
              <view class="flex-row items-center self-start group_5">
                <text class="font_3">已出</text>
                <image
                  class="ml-18 shrink-0 image_8"
                  src="https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=75143fcfa52f53ff3d1093bc7398c986.png"
                />
              </view>
            </view>
            <view class="mt-12 flex-col">
              <text class="self-start font">找代课，微信号：18888888888</text>
              <text class="self-stretch font_5 mt-5">
                Lorem ipsum dolor sit amet, adipiscing.Aenean isiod bibendum laoreet...
              </text>
            </view>
          </view>
          <view class="mt-28 flex-col">
            <view class="flex-row equal-division">
              <image
                class="image_9 equal-division-item"
                src="https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=24ddf9f1bbf5d009f98c1246dea40748.png"
              />
              <image
                class="image_9 equal-division-item ml-7"
                src="https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=d477fa5d423d97d67add3b55086dc0db.png"
              />
              <image
                class="image_9 equal-division-item ml-7"
                src="https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=9a4805bacb08f1c9fcc0f3709aa853bb.png"
              />
            </view>
            <view class="flex-row justify-between items-center group_6 mt-11">
              <view class="flex-row items-center">
                <image
                  class="shrink-0 image_10"
                  src="https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=bd2b46d0261ac437b3da31f60af70d2e.png"
                />
                <text class="ml-4 font_6 text_9">556</text>
              </view>
              <view class="flex-row items-center group_7">
                <view class="flex-row justify-start items-center image-wrapper_2">
                  <image
                    class="image_11"
                    src="https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=b6c01696b33ce456790680294138d911.png"
                  />
                </view>
                <view class="flex-row justify-start items-center image-wrapper_2 view_2">
                  <text class="font_7 text_10">1</text>
                </view>
                <view class="flex-row justify-start items-center image-wrapper_2 view">
                  <image
                    class="image_12"
                    src="https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=9f364ac2ff449e69dd392d20880f81b2.png"
                  />
                </view>
                <view class="flex-row justify-start text-wrapper"><text class="font_7 text_11">244</text></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="section_6"></view>
  </view>
</template>

<script setup>
  import {
    reactive, ref
  } from 'vue';
  const navs = reactive([{
      name: '校园墙'
    },
    {
      name: '兼职'
    },
    {
      name: '跑腿'
    },
    {
      name: '物品交易'
    },
    {
      name: '兴趣爱好'
    }
  ]);
const items = [null,null] 
</script>

<style scoped>
.ml-5 {
  margin-left: 10rpx;
}
.ml-11 {
  margin-left: 22rpx;
}
.mt-7 {
  margin-top: 14rpx;
}
.mt-5 {
  margin-top: 10rpx;
}
.ml-7 {
  margin-left: 14rpx;
}
.mt-11 {
  margin-top: 22rpx;
}
.page {
  background-color: #f7f8fa;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-color: #ffffff;
  border-bottom: solid 2rpx #f0f0f0;
}
.section_2 {
  padding: 36rpx 12rpx 42rpx 34rpx;
  background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
}
.group {
  padding-left: 36rpx;
  padding-right: 16rpx;
}
.text {
  color: #333333;
  font-size: 30rpx;
  font-family: SFProText;
  font-weight: 600;
  line-height: 21.78rpx;
}
.image {
  width: 34rpx;
  height: 22rpx;
}
.image_2 {
  width: 30rpx;
  height: 22rpx;
}
.image_3 {
  width: 48rpx;
  height: 22.66rpx;
}
.group_2 {
  padding: 16rpx 0 12rpx;
}
.image_4 {
  width: 18rpx;
  height: 34rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.text_2 {
  color: #333333;
  font-size: 36rpx;
  font-family: SourceHanSansCN;
  line-height: 33.56rpx;
  opacity: 0.9;
}
.section_3 {
  padding: 12rpx 24rpx;
  background-color: #ffffff99;
  border-radius: 50rpx;
  border-left: solid 1rpx #97979733;
  border-right: solid 1rpx #97979733;
  border-top: solid 1rpx #97979733;
  border-bottom: solid 1rpx #97979733;
}
.pos {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.image-wrapper {
  width: 38rpx;
}
.image_6 {
  width: 38rpx;
  height: 14rpx;
}
.section_4 {
  background-color: #33333333;
  width: 1rpx;
  height: 37rpx;
}
.image_5 {
  width: 34rpx;
  height: 34rpx;
}
.group_3 {
  padding-left: 60rpx;
  padding-bottom: 24rpx;
}
.font {
  font-size: 32rpx;
  font-family: SourceHanSansCN;
  line-height: 30.3rpx;
  color: #333333;
}
.text_3 {
  color: #4c8eef;
  line-height: 29.72rpx;
}
.text_4 {
  line-height: 29.66rpx;
}
.text_5 {
  line-height: 29.54rpx;
}
.text_6 {
  line-height: 29.38rpx;
}
.text_7 {
  line-height: 29.88rpx;
}
.section_5 {
  margin-left: 66rpx;
  background-color: #4c8eef;
  width: 56rpx;
  height: 4rpx;
}
.list {
  padding: 20rpx 0 34rpx;
}
.list-item {
  padding: 32rpx 20rpx 32rpx 32rpx;
  background-color: #ffffff;
}
.list-item:first-child {
  margin-top: 0;
}
.image_7 {
  border-radius: 50%;
  width: 84rpx;
  height: 80rpx;
}
.group_4 {
  width: 156rpx;
}
.font_2 {
  font-size: 28rpx;
  font-family: SourceHanSansCN;
  line-height: 25.84rpx;
  color: #4c8eef;
}
.font_4 {
  font-size: 20rpx;
  font-family: SourceHanSansCN;
  line-height: 22rpx;
  color: #cccccc;
}
.text_8 {
  line-height: 24rpx;
}
.group_5 {
  margin-right: 8rpx;
  margin-top: 16rpx;
}
.font_3 {
  font-size: 24rpx;
  font-family: SourceHanSansCN;
  line-height: 22rpx;
  color: #365d99;
}
.image_8 {
  width: 26rpx;
  height: 14rpx;
}
.font_5 {
  font-size: 28rpx;
  font-family: SourceHanSansCN;
  line-height: 40rpx;
  color: #4d4d4d;
}
.equal-division {
  margin-right: 8rpx;
}
.image_9 {
  flex: 1 1 220rpx;
}
.equal-division-item {
  height: 220rpx;
}
.group_6 {
  padding: 16rpx 10rpx 0;
  border-top: solid 1rpx #e5e5e5;
}
.image_10 {
  width: 44rpx;
  height: 44rpx;
}
.font_6 {
  font-size: 28rpx;
  font-family: SourceHanSansCN;
  line-height: 22rpx;
  color: #cccccc;
}
.text_9 {
  line-height: 21.26rpx;
}
.group_7 {
  margin-right: 8rpx;
  width: 225.12rpx;
}
.image-wrapper_2 {
  width: 48rpx;
}
.image_11 {
  width: 48rpx;
  height: 48rpx;
}
.view_2 {
  margin-left: 8rpx;
}
.font_7 {
  font-size: 28rpx;
  font-family: SourceHanSansCN;
  line-height: 22rpx;
  color: #333333e6;
}
.text_10 {
  line-height: 20.52rpx;
}
.view {
  margin-left: 4rpx;
}
.image_12 {
  width: 44rpx;
  height: 38rpx;
}
.text-wrapper {
  margin-left: 20rpx;
}
.text_11 {
  line-height: 20.88rpx;
}
.section_6 {
  background-color: #ffffff;
  height: 68rpx;
}         
</style>
